<template>
  <div class="phone3">
    <div ref="chartContainerphone3" style="width: 100%;height: 300px"></div>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref, onMounted, defineProps, defineEmits, nextTick} from "vue";
import * as echarts from 'echarts';
const state = reactive({
})

const chartContainerphone3 = ref(null);
const createCharts = ()=>{
  const chartInstance = echarts.init(chartContainerphone3.value);
  const option = {
    title: {
      text: '产量趋势图',
      right:'150px',
      textStyle:{
        color:'#0048ff',
        fontSize:'16px',
        textAlign:'right'
      }
    },
    tooltip: {
      trigger: 'axis',
      triggerOn:'click',
      axisPointer: {
        type: 'shadow'
      },
      //formatter: '{b0}: {c0}吨',
    },
    legend: {
      data: ['风能装备', '核能装备', '海工装备', '调质钢', '传动装备', '耐磨介质', '核海新材料'],
      top:'25px',
      textStyle:{
        //color:'#00fbea'
        color : '#4271e8'
      }
    },
    grid: {
      left:'4px',
      top:'80px',
      right: '30px',
      bottom: '10px',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['10月', '11月', '12月', '1月', '2月', '3月'],
      axisLine:{
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel:  {
        interval: 0,
        //rotate:40,
        show: true,
        splitNumber: 15,
        textStyle: {
          color: "#4271e8",
          fontSize: '12',
        },
      },
    },
    yAxis: {
      type: 'value',
      axisLine:{
        show: false,
      },
      axisLabel:{
        show: true,
        formatter: '{value}吨',
        splitNumber: 15,
        textStyle: {
          color: "#4271e8",
          fontSize: '10',
        },
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255,255,255,.1)",
        }
      }
    },
    series: [
      {
        name: '风能装备',
        type: 'line',
        //stack: 'Total',
        data: [610, 490, 530, 515, 330, 410]
      },
      {
        name: '核能装备',
        type: 'line',
        //stack: 'Total',
        data: [510, 492, 430, 410, 280, 388]
      },
      {
        name: '海工装备',
        type: 'line',
        //stack: 'Total',
        data: [480, 401, 454, 490, 220, 366]
      },
      {
        name: '调质钢',
        type: 'line',
        //stack: 'Total',
        data: [310, 301, 254, 290, 230, 310]
      },
      {
        name: '传动装备',
        type: 'line',
        //stack: 'Total',
        data: [360, 325, 263, 284, 240, 290]
      },
      {
        name: '耐磨介质',
        type: 'line',
        //stack: 'Total',
        data: [322, 311, 274, 289, 280, 320]
      },
      {
        name: '核海新材料',
        type: 'line',
        //stack: 'Total',
        data: [458, 421, 464, 498, 236, 288]
      }
    ]
  };
  chartInstance.setOption(option);
}

onMounted(()=>{
  createCharts();
})
</script>

<style lang="less" scoped>
.phone3{
  padding-top: 5px;
  border: 1px solid #32a99e;
}
</style>
